<%--
  Created by IntelliJ IDEA.
  User: student
  Date: 2019/9/20
  Time: 17:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basepath %>"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
        body {
            padding: 10px;
            margin-right: 10px;
        }

        /** 表单验证 样式布局 **/
        label.error {
            position: absolute;
            right: 18px;
            top: 10px;
            color: #ef392b;
            font-size: 12px
        }

        .input-group label.error {
            z-index:99;
            right: 42px
        }

        .input-group.date label.error {
            z-index:99;
            right: 3px
        }

        .Validform_error,input.error,select.error {
            background-color: #fbe2e2;
            border-color: #c66161;
            color: #c00
        }

        .Validform_wrong,.Validform_right,.Validform_warning {
            display: inline-block;
            height: 20px;
            font-size: 12px;
            vertical-align: middle;
            padding-left: 25px
        }

        .i-checks label.error, .check-box label.error, .radio-box label.error {
            right: auto;
            width: 150px;
            left: 210px;
            top: 1px;
            max-width: none;
        }
    </style>
</head>
<body>
    <form class="layui-form" action="user/addSave" method="post" id="form-user-add">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label><div class="layui-input-block" style="width:300px">
            <input class="layui-input" type="text" name="username" autocomplete="off" required />
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label><div class="layui-input-block" style="width:300px">
            <input class="layui-input" type="password" name="password" autocomplete="off" required />
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label><div class="layui-input-block" style="width:300px">
            <input  name="gender" checked title="男" type="radio" value="0" /><input name="gender" title="女" type="radio" value="1"  />
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label><div class="layui-input-block" style="width:300px">
            <select id="grade" name="grade.id" required></select>
        </div>
        </div>
        <div class="layui-form-item layui-upload">
            <input class="layui-input" type="hidden" name="photo" autocomplete="off" id="photo"  />
            <label class="layui-form-label">头像</label><div class="layui-input-block" style="width:300px">
            <button class="magicalcoder-layupload layui-btn" type="button" id="photobtn">上传图片</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="photodiv"></div>
            </blockquote>
        </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="width:300px">
                <button type="submit" class="layui-btn layui-btn-normal">确定</button><button type="reset" class="layui-btn layui-btn-danger">重置</button>
            </div>
        </div>
    </form>

<script src="js/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script src="validate/jquery.validate.min.js"></script>
<script src="validate/messages_zh.min.js"></script>
<script src="validate/jquery.validate.extend.js"></script>
<script>

    $("#form-user-add").validate({
        onkeyup: false,
        rules:{
            username:{
                minlength: 2,
                maxlength: 20,

            },
            password:{
                minlength: 5,
                maxlength: 20
            }
        },
        messages: {

        },
        focusCleanup: true
    });



    layui.use(['upload','form'], function (upload,form) {
        var $ = layui.jquery
        $.ajax({url:"grade/list",success:function(result){
            var arr = $.parseJSON(result);
            $("#grade").empty();
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += "<option value='"+arr[i].id +"'>"+ arr[i].gname+"</option>";
            }
            $("#grade").append($(str));
            form.render("select");
        }});
        //多图片上传
        upload.render({
            elem: '#photobtn'
            ,url: 'user/upload'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#photodiv').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    $("#photo").val(file.name);
                });
            }
            ,done: function(res){
                console.log(res);
                layer.msg("上传成功！")
            }
        });
    });
</script>
</body>
</html>
